import React, { FC, useState, useRef, useEffect } from 'react'
import { Button, Pagination, Tag } from 'antd'
import {
  PlayCircleOutlined,
  PlusSquareOutlined,
  CheckSquareOutlined,
  StockOutlined,
  SettingOutlined,
  LeftOutlined,
  RightOutlined,
  UploadOutlined,
  DownloadOutlined
} from '@ant-design/icons';
import './index.less'
import Navigation from '../../../component/Navigation/index'
import Table from '../../../component/table/index'
import Alert from '../../../component/alert'
// 接口
import { class_gradeMangerData } from '../../../api/Grade'
export default function GradeManger() {
  // 表格数据
  const columns = [
    // 所属学院和校区  教室说明
    {
      title: '班级',
      dataIndex: 'classAndGrade',
      key: 'classAndGrade'
    },
    {
      title: '所属阶段',
      dataIndex: 'stage',
      key: 'stage',
    },
    {
      title: '教室号',
      dataIndex: 'classroom',
      key: 'classroom',
    },
    {
      title: '人数',
      dataIndex: 'property',
      key: 'property',
    },
    {
      title: '讲师',
      dataIndex: 'lecturer',
      key: 'lecturer',
    },
    {
      title: '辅导员',
      dataIndex: 'counselor',
      key: 'counselor'
    },
    {
      title: '操作',
      key: 'key',
      dataIndex: 'key',
      render: (text, record, index) => {
        return (<>
          {["查看", "编辑", "删除"].map(tag => {
            let color = tag === "删除" ? 'red' : 'green';
            if (tag === '查看') {
              color = 'blue';
            }
            return (
              <Tag className='class_tag' color={color} key={tag} onClick={(e) => { classLookFun(e, record, index) }}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>)
      }
    }
  ];
  const list = [
    {
      "id": 1,
      "collage": "网站工程",
      "school": [
        {
          "sid": "wbj",
          "name": "北京校区",
          "classList": [
            {
              "cid": "wbjg",
              "name": "专高",
            },
            {
              "cid": "wbjs",
              "name": "实训"
            }
          ]
        }, {
          "sid": "wbd",
          "name": "保定校区",
          "classList": [
            {
              "cid": "wbdg",
              "name": "专高"
            },
            {
              "cid": "wbds",
              "name": "实训"
            }
          ]
        },
        {
          "sid": "whd",
          "name": "邯郸校区",
          "classList": [
            {
              "cid": "whdg",
              "name": "专高"
            },
            {
              "cid": "whds",
              "name": "实训"
            }
          ]
        }
      ]
    },
    {
      "id": 2,
      "collage": "传媒学院",
      "school": [
        {
          "sid": "cbd",
          "name": "保定校区",
          "classList": [
            {
              "cid": "cbdg",
              "name": "专高"
            },
            {
              "cid": "cbds",
              "name": "实训"
            }
          ]
        }
      ]
    },
    {
      "id": 3,
      "collage": "计算机学院",
      "school": [
        {
          "sid": "jbd",
          "name": "保定校区",
          "classList": [
            {
              "cid": "jbdg",
              "name": "专高"
            },
            {
              "cid": "jbds",
              "name": "实训"
            }
          ]
        }
      ]
    },
    {
      "id": 4,
      "collage": "人工智能学院",
      "school": [
        {
          "sid": "rbd",
          "name": "保定校区",
          "classList": [
            {
              "cid": "rbdg",
              "name": "专高"
            },
            {
              "cid": "rbds",
              "name": "实训"
            }
          ]
        }
      ]
    }
  ]
  // 弹框开关
  const [alertFlag, setAlertFlag] = useState(false)
  // 弹框标题
  const [alertName, setAlertName] = useState('')
  // 弹框内容
  const [content, setContent] = useState()
  // 分页 的条数 和  当前页码
  const [pageList, setPageList] = useState(10)
  // 页码
  const [pageNum, setPageNum] = useState(1)
  // 总数据长度
  const [dataLength, setDataLength] = useState(0)
  // 默认数据
  const [stage, setStage] = useState('wbjg')
  const [campus, setCampus] = useState('北京校区')
  const [college, setCollege] = useState('网站工程')
  // 班级数据
  const [classData, setClassData] = useState([])
  // 班级数据获取
  const gradeMangerData = async () => {
    let resault = await class_gradeMangerData({ stage, campus, college, pageList, pageNum })
    setClassData(resault.data.result.arr)
    setDataLength(resault.data.result.resault.length)
  }
  useEffect(() => {
    gradeMangerData()
    setDataLength(classData.length)
  }, [stage, campus, college, pageList, pageNum])
  // 左侧菜单栏点击事件
  const handleClick = async (e: any) => {
    setStage(e.keyPath[0])
    setCampus(e.keyPath[1])
    setCollege(e.keyPath[2])
  }
  // 操作  删除  编辑  查看
  const classLookFun = (e, record, index) => {
    console.log();
  }
  // 分页
  const showSizeChange = (current, size) => {
    // pageSize 变化的回调
  }
  const changeSize = (page, pageSize) => {
    // 参数是改变后的页码及每页条数
  }
  // 关闭弹窗
  const closeFlag = () => {
    setAlertFlag(false)
  }
  // 点击创建班级
  const createAClass = () => {
    setAlertFlag(true)
    setAlertName('创建班级')
  }
  return (
    <div className='gradeManger'>
      <div className='class_btns'>
        <div>
          <Button className='antd_btns' type="primary" icon={<PlayCircleOutlined />}>
            开始新的教学周期
          </Button>
          <Button className='antd_btns' onClick={createAClass} type="primary" icon={<PlusSquareOutlined />}>
            创建班级
          </Button>
          <Button className='antd_btns' type="primary" icon={<CheckSquareOutlined />}>
            选择教学周期
          </Button>
          <Button className='antd_btns' type="primary" icon={<StockOutlined />}>
            升末班
          </Button>
          <Button className='antd_btns' type="primary" icon={<SettingOutlined />}>
            设置
          </Button>
          <Button className='antd_btns' type="primary" icon={<LeftOutlined />}>
            上个教学周期
          </Button>
          <Button className='antd_btns' type="primary" icon={<RightOutlined />}>
            下个教学周期
          </Button>
          <Button className='antd_btns' type="primary" icon={<UploadOutlined />}>
            导出
          </Button>
          <Button className='antd_btns' type="primary" icon={<DownloadOutlined />}>
            导入
          </Button>
        </div>
        <div className='newGade'>
          <p className='nowManger'>
            当前教学周期：<span>2022/6/14-2022/7/14</span>
          </p>
        </div>
      </div>
      <div className='class_content clear'>
        <div className='class_leftTab'>
          <Navigation
            // 总数据
            data={list}
            // 一标题属性  数组类型  "collage":["网站工程", "人工智能"]
            primaryNavigationProps="collage"
            // 二级标题属性  "collage":["网站", "人工"]
            childrenProps='school'
            // 二级标题对象属性
            childrenItem='name'
            // 是否开启深层导航
            isDeepMenu={true}
            // 列表属性
            deepProps='classList'
            // 列表遍历对象属性
            deepItem='name'
            // 多层子级key值
            setDeepKey='cid'
            // 获取当前自己标题的key
            handleClick={handleClick}
            // 设置袭击标题的key值
            setChildrenKey="sid"
            // 样式
            style={{ width: 200, height: 500, border: "1px solid #ccc" }}
          />
        </div>
        <div className='class_table'>
          <div>
            <Table studentData={classData} columns={columns} />
          </div>
          <div>
            <Pagination
              // showQuickJumper
              showSizeChanger
              defaultCurrent={pageNum}
              defaultPageSize={pageList}
              total={dataLength}
              onShowSizeChange={showSizeChange}
              onChange={changeSize}
            />
          </div>
        </div>
      </div>
      {
        alertFlag ?
          <Alert alertName={alertName} alertFlag={alertFlag} confirmLoading={true} con={content} close={closeFlag} />
          : null
      }
    </div>
  )
}
